<template>
  <el-menu :collapse="!isOpen" router :default-active="activeMenu">
    <MenuItem v-for="(item, index) in munuData" :item="item" :key="`${item.path}_${index}`"></MenuItem>
  </el-menu>
</template>

<script setup>
import {useRouteStore} from '@/stores'
import MenuItem from './MenuItem.vue'

defineProps({ isOpen: {type: Boolean}})

const routeStore = useRouteStore()
const route = useRoute()
const munuData = ref(routeStore.routes)

// 当前页面激活菜单路径，先从路由里面找
const activeMenu = computed(() => {
  const { meta, path } = route
  if (meta?.activeMenu) {
    return [meta.activeMenu]
  }
  return path
})

</script>

<style scoped lang="scss">
.el-menu {
  border: 0;
}
</style>
